<template>
    <div class="log" :style="{background:'url('+bgimg+') 0 / cover fixed'}">
        <el-container class="log-container">
            <div class="log-content">
                <img src="../assets/logono.png" alt="">
                <span>LockerExpert</span>
                <h4>银沵体育科技</h4>
                <h1>会员管理系统</h1>
            </div>
            <el-card class="log-card">
                <el-form label-position="right" autocomplete="off" :model="formLogin" ref="formLogin" :rules="rules" @keyup.native.enter="login">
                    <el-form-item prop="account">
                        <el-input class="opacity" v-model.trim="formLogin.account" prefix-icon="fa fa-user-o" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input class="opacity" v-model.trim="formLogin.password" type="password" prefix-icon="fa fa-lock" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn btn-block" @click="login" autofocus="autofocus">登 录</el-button>
                    </el-form-item>
                </el-form>
                <el-button style="color:#fff;float:right" type="text" icon="el-icon-back">前往注册</el-button>
            </el-card>
        </el-container>
    </div>
    
</template>

<script>
export default {
    data() {
        return {
            bgimg:require('../assets/bg4.jpg'),
            formLogin: {
                account: '',
                password: '',
            },
            rules:{
                account:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max:46, message: '长度在 8 到 46 个字符', trigger: 'blur' },
                ]
            },
        };
    },
    mounted(){
        
    },
    methods: {
        login:function(){
            var errorInfo=this.validateFun();
            if(!errorInfo){
                axios.post('emp/login', this.formLogin,{
                })
                .then( (res)=> {
                    sessionStorage.setItem('user',JSON.stringify(res.employee)); 
                    this.$router.push({ path: '/' });
                })
                .catch( (error)=> {
                    this.$notify.error({title: '错误',message:error||'用户名密码不正确'});
                });
            }else{
                this.$notify({title: '警告',message: errorInfo,type: 'warning',duration:1200});
                return false;
            }
        },
        validateFun:function(){
            var errorInfo='';
            for(var i=0;i<2;i++){
                this.$refs.formLogin.validateField((['account','password'][i]),(re)=>{
                    errorInfo+=re+(re==''?'':', ');
                })
            }
            return errorInfo;
        },
    }
}
</script>

<style scoped lang="scss">
    @import url("../assets/css/passwordAndLogin.css");
    .log{
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }
 
    /* hsla(0, 0%, 100%, .3); rgba(156, 156, 156, 0.33) */
    .log-card{ 
        position: relative;
        padding:1% 2% 1%;
        background: rgba(75, 79, 82, 0.33);
        /* overflow: hidden;*/
        border: none; 
    }
    /* .log-card::before{
        content: '';
        position: absolute;
        top: 0;right: 0;bottom: 0;left: 0;
        filter: blur(0px);
        margin: -30px;
        z-index: -1;
    }  */
    .log-content{
        color:#fff;
        width:20%;
        letter-spacing: 2px;
    }
    .log-content span{
        font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
        letter-spacing: 0px;
    }
    .log-content img{
        height: 17px;
        width: 20px;
        display: inline-block;
    }
    .log-content h1{
        font-weight:300
    }
    .btn{
        margin-top: 10px;
        background: rgba(75, 79, 82, 0);
        color: white;
        border: 2px solid white;
        font-weight: 600;
    }
    .btn:hover,.btn:focus,.btn:active{
        background: rgba(75, 79, 82, 0.4);
    }
</style>


